<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<script type="text/javascript" src="static/admin/js/vue.min.js"></script>
		<title>form</title>
		<style type="text/css">
			#table table {
				width: 100%;
				font-size: 14px;
				border: 1px solid #eee
			}
			#table {
				padding: 0 10px;
			}
			table thead th {
				background: #f5f5f5;
				padding: 10px;
				text-align: left;
			}
			table tbody td {
				padding: 10px;
				text-align: left;
				border-bottom: 1px solid #eee;
				border-right: 1px solid #eee;
			}
			table tbody td span {
				margin: 0 10px;
				cursor: pointer;
			}
			.delete {
				color: red;
			}
			.edit {
				color: #008cd5;
			}
			.add {
				border: 1px solid #eee;
				margin: 10px 0;
				padding: 15px;
			}
			input {
				border: 1px solid #ccc;
				padding: 6px;
				border-radius: 3px;
				margin-right: 15px;
			}
			select{
				border: 1px solid #ccc;
				padding: 6px;
				border-radius: 3px;
				margin-right: 15px;
			}
			button {
				background: #008cd5;
				border: 0;
				padding: 4px 15px;
				border-radius: 3px;
				color: #fff;
			}
			#mask {
				background: rgba(0, 0, 0, .5);
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 4;
				top: 0;
				left: 0;
			}
			.mask {
				width: 300px;
				height: 350px;
				background: rgba(255, 255, 255, 1);
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 47;
				border-radius: 5px;
			}
			.title {
				padding: 10px;
				border-bottom: 1px solid #eee;
			}
			.title span {
				float: right;
				cursor: pointer;
			}
			
			.content {
				padding: 10px;
			}
			
			.content input {
				width: 270px;
				margin-bottom: 15px;
			}
		</style>
	</head>

	<body>

			<div id="table">

				<div class="add">
					<div>
						<select v-model="formObj.community_id" name="community_id" >
							<option disabled value="" >开票小区</option>
							{foreach $communitylist as $comm}
							<option value="{$comm.community_id}">{$comm.community_name}</option>
							{/foreach}
						</select>
						<input type="text" v-model="formObj.roomaddress" name="roomaddress" value="" placeholder="房号" />
					</div>

					<input type="text" v-model="formObj.buyerName" name="buyerName" value="" placeholder="购方名称(必填)" />
					<input type="text" v-model="formObj.buyerTaxNum" name="buyerTaxNum" value="" placeholder="购方税号" />
					<input type="text" v-model="formObj.buyerAddress" name="buyerAddress" value="" placeholder="购方地址" />


					<input type="text" v-model="formObj.buyerPhone" name="buyerPhone" value="" placeholder="推送手机(必填)" />
					<input type="text" v-model="formObj.buyerTel" name="buyerTel" value="" placeholder="购方电话" />
					<input type="text" v-model="formObj.buyerBank" name="buyerBank" value="" placeholder="开户行" />


					<input type="text" v-model="formObj.buyerAccount" name="buyerAccount" value="" placeholder="开户账号" />


				</div>
				<div class="add">

					<select v-model="addDetail.goodsName" name="goodsName" >
						<option disabled value="" >*简称*货物或应税劳务、服务名称</option>
						{foreach $costtype as $cost}
						<option value="{$cost.type}">{$cost.type}</option>
						{/foreach}
					</select>

					<input type="text" v-model="addDetail.specType" name="specType" value="" placeholder="规格型号" />
					<input type="text" v-model="addDetail.unit" name="unit" value="" placeholder="单位" />
					<input type="number" v-model="addDetail.num" name="num" value="" placeholder="数量" />
					<input type="text" v-model="addDetail.price" name="price" value="" placeholder="单价" />
					<select v-model="addDetail.taxRate" name="taxRate">
						<option  value="">税率</option>
						<option value="0.01">1%</option>
						<option value="0.02">2%</option>
						<option value="0.03">3%</option>
						<option value="0.04">4%</option>
						<option value="0.05">5%</option>
						<option value="0.06">6%</option>
						<option value="0.07">7%</option>
						<option value="0.08">8%</option>
						<option value="0.09">9%</option>
						<option value="0.10">10%</option>
						<option value="0.11">11%</option>
						<option value="0.12">12%</option>
						<option value="0.13">13%</option>
						<option value="0.14">14%</option>
						<option value="0.15">15%</option>
						<option value="0.16">16%</option>
						<option value="0.17">17%</option>
						{/foreach}
					</select>


					<button @click="adddetail" style="font-size:24px">+</button>
				</div>
				<table cellpadding="0" cellspacing="0">
					<thead>
						<tr>
							<th>商品名称</th>
							<th>规格型号</th>
							<th>单位</th>
							<th>数量</th>
							<th>单价</th>
							<th>税率</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in formObj.invoiceDetails">

							<td>{{item.goodsName}}</td>
							<td width="10%">{{item.specType}}</td>
							<td width="10%">{{item.unit}}</td>
							<td width="10%">{{item.num}}</td>
							<td width="10%">{{item.price}}</td>
							<td width="10%">{{item.taxRate}}</td>

							<td width="18%"><span @click="deletelist(index)" class="delete">删除</span><span class="edit" @click="edit(item,index)">编辑</span></td>
						</tr>
					</tbody>
				</table>
				<div id="mask" v-if="editlist">
					<div class="mask">
						<div class="title">
							编辑
							<span @click="editlist=false">
								X
							</span>
						</div>
						<div class="content">
							<input type="text" v-model="editDetail.goodsName" name="goodsName" value="" placeholder="商品名称" required/>
							<input type="text" v-model="editDetail.specType" name="specType" value="" placeholder="规格型号" required/>
							<input type="text" v-model="editDetail.unit" name="unit" value="" placeholder="单位" required/>
							<input type="text" v-model="editDetail.num" name="num" value="" placeholder="数量" required/>
							<input type="text" v-model="editDetail.price" name="price" value="" placeholder="单价" required/>

							<select v-model="editDetail.taxRate" name="taxRate">
								<option  value="">税率</option>
								<option value="0.01" >1%</option>
								<option value="0.02">2%</option>
								<option value="0.03">3%</option>
								<option value="0.04">4%</option>
								<option value="0.05">5%</option>
								<option value="0.06">6%</option>
								<option value="0.07">7%</option>
								<option value="0.08">8%</option>
								<option value="0.09">9%</option>
								<option value="0.10">10%</option>
								<option value="0.11">11%</option>
								<option value="0.12">12%</option>
								<option value="0.13">13%</option>
								<option value="0.14">14%</option>
								<option value="0.15">15%</option>
								<option value="0.16">16%</option>
								<option value="0.17">17%</option>
								{/foreach}
							</select>
							<button @click="update">更新</button>
							<button @click="editlist=false">取消</button>
						</div>
					</div>
				</div>
				<div style="text-align: center;margin-top: 20px">
					<button   @click="submit" style="font-size:16px">保存开票资料</button>
				</div>
			</div>


		<script src="static/admin/js/jquery.min.js"></script>
		<script>
			var app = new Vue({
				el: '#table',
				data: {
					addDetail: {
                        taxRate:""
					},
					editlist: false,
					editDetail: {},

					editid:'',
					formObj:{
						community_id:"",
						buyerName:"",
                        buyerPhone:"",
                        buyerTaxNum:"",
                        buyerTel:"",
                        buyerAddress:"",
                        buyerAccount:"",
                        invoiceDetails: [],

					}
				},
                computed:{
                    verify:function () {

                        if(this.formObj.community_id==""){
                            return {"flag":false,"msg":'请选择小区'};
                        }
                        if(this.formObj.buyerPhone==""){
                            return {"flag":false,"msg":'请填写用户手机'};
                        }
                        if(this.formObj.buyerName==""){
                            return {"flag":false,"msg":'请填写购方名称'};
                        }

                        return {"flag":true,"msg":'ok'};
                    }
                },
				methods: {

					//新增
					adddetail() {
						//这里的思路应该是把this.addDetail传给服务端，然后加载列表this.newsList
						//this.formObj.newsList.push(this.addDetail)
						if(!this.addDetail.goodsName||this.addDetail.goodsName==""){
                            alert('请填写商品名称');
                            return false;
						}
                        if(!this.addDetail.specType||this.addDetail.specType==""){
                            alert('请填写规格型号');
                            return false;
                        }
                        if(!this.addDetail.unit||this.addDetail.unit==""){
                            alert('请填写单位');
                            return false;
                        }
                        if(!this.addDetail.num||this.addDetail.num==""){
                            alert('请填写数量');
                            return false;
                        }
                        if(!this.addDetail.price||this.addDetail.price==""){
                            alert('请填写单价');
                            return false;
                        }
                        if(!this.addDetail.taxRate||this.addDetail.taxRate==""){
                            alert('请填写税率');
                            return false;
                        }
						this.formObj.invoiceDetails.push({
                            goodsName:this.addDetail.goodsName,
                            specType: this.addDetail.specType,
                            unit: this.addDetail.unit,
                            num: this.addDetail.num,
                            price: this.addDetail.price,
                            taxRate: this.addDetail.taxRate

						})


					},
					//删除
					deletelist( i) {
						this.formObj.invoiceDetails.splice(i, 1);
						//这边可以传id给服务端进行删除  ID = id
						//axios.get('url',{ID:id}).then((res) =>{
						//			加载列表				
						//})
					},
					//编辑
					edit(item,index) {
					    console.log(index)
						this.editDetail = {
					        id:index,
                            goodsName: item.goodsName,
                            specType: item.specType,
							unit: item.unit,
                            num: item.num,
                            price: item.price,
                            taxRate: item.taxRate
						}
						this.editlist = true
						this.editid = index
						
					},
					//确认更新
					update() {

						let _this= this

                        if(_this.editDetail.goodsName==""){
						    alert('请填写商品名称');
						    return false;
						}
                        if(_this.editDetail.specType==""){
                            alert('请填写规格型号');
                            return false;
                        }
                        if(_this.editDetail.unit==""){
                            alert('请填写单位');
                            return false;
                        }
                        if(_this.editDetail.num==""){
                            alert('请填写数量');
                            return false;
                        }
                        console.log(this)
						for(let i = 0; i < _this.formObj.invoiceDetails.length; i++) {
							if(i ==this.editid) {
								_this.formObj.invoiceDetails[i] = {

                                    goodsName: _this.editDetail.goodsName,
                                    specType: _this.editDetail.specType,
                                    unit: _this.editDetail.unit,
                                    num: _this.editDetail.num,
                                    price: _this.editDetail.price,
                                    taxRate: _this.editDetail.taxRate
								}
								this.editlist = false
							}
						}
					},
                    submit: function() {
						console.log(this.formObj.community_id);
                        if(this.formObj.community_id==""){
                            alert('请选择小区');
                            return ;
                        }
                        if(this.formObj.buyerPhone==""){
                            alert('请填写推送手机');
                            return ;
                        }
                        if(this.formObj.buyerName==""){
                            alert('请填写购方名称');
                            return ;
                        }
                        if(this.formObj.invoiceDetails.length=="0"){
                            alert('请填写开票内容');
                            return ;
						}
                        console.log( this.formObj);
                        let formData = JSON.stringify(this.formObj);
                        console.log(formData);
						$.post("{:url('invoicefilling')}",{data:formData},function(res){
						    if(res.errorCode=="0"){

                                window.parent.location.href="{:url('invoicelist')}";
                                return ;
                                window.location.href="{:url('invoicelist')}"
							}
							console.log(res);
						},"json" )

                    }
                }
			})
		</script>
	</body>

</html>